<template>
    <van-tabbar v-model="active" @change="change" :z-index="tabbar_index">
        <van-tabbar-item icon="search">入库</van-tabbar-item>
        <van-tabbar-item icon="home-o">库存</van-tabbar-item>
        <van-tabbar-item icon="newspaper-o">已出库</van-tabbar-item>
    </van-tabbar>
</template>

<script>

    import Vue from 'vue';
    import {Tabbar, TabbarItem} from 'vant';

    Vue.use(Tabbar).use(TabbarItem);
    export default {
        data: () => ({
            active: 0,
            tabbar_index: 999,
        }),
        activated() {
            // console.log('#########');
            this.check_path()
        },
        mounted() {
            // console.log('**********');
            this.check_path()
        },
        methods: {
            // 页面刷新时 ---> 根据路由点亮对应的 Nav
            check_path() {
                let path = this.$route.path;
                // console.log(['path', path]);
                if (path === '/in') this.active = 0;
                else if (path === '/list') this.active = 1;
                else if (path === '/outed') this.active = 2
            },
            change(data) {
                // console.log(['xxxxxxx', data]);
                if (data === 0) this.$router.push({name: '入库'});
                else if (data === 1) this.$router.push({name: '库存'});
                else if (data === 2) this.$router.push({name: '已出库'})
            }
        }
    }
</script>

<style lang="less" scoped>
    /*@import '~@/assets/style/base.styl'*/

    /*.van-tabbar {*/
    /*    z-index: 999*/
    /*}*/

    /*.van-tabbar-item*/
    /*& > > > .van-tabbar-item--active*/
    /*color red*/
</style>
